<!-- 3D柱状图 -->
<template>
  <div class="bar-wrap">
    <Echarts :data="data" />
  </div>
</template>

<script setup>
//   import Echarts from "../components/echarts.vue";
import Echarts from "./chartCube.vue"
import { computed } from "vue";
const props = defineProps({
  //位置
  grid: {
    type: Object,
    default: () => ({
      left: "5%",
      right: "5%",
      bottom: "10%",
      top: "15%",
    }),
  },
  //图例
  legend: {
    type: Object,
    default: () => { },
  },
  //数据
  series: {
    type: Object,
    default: () => { },
  },
  //x轴配置
  xAxis: {
    type: Array,
    default: () => { },
  },
  //y轴配置
  yAxis: {
    type: Object,
    default: () => { },
  },
  //单位
  unit: {
    type: String,
    default: "",
  },
  //上下圆面颜色
  pictorialBarColor: {
    type: Array,
    default: () => ["#4295F5", "rgba(31,97,234,0.4)"],
  },
});

//echarts配置
const data = computed(() => {
  let { name, data } = props.series;

  //series配置处理
  let seriesData = [
    //中间柱状图
    {
      type: "bar",
      barWidth: 40, //柱子宽度
      itemStyle: {
        //柱子样式
        color: {
          //渐变颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#2F70BB" },
            { offset: 1, color: "#2F70BB" },
          ],
        },
      },
      ...props.series,
    },
    //顶部圆面
    {
      type: "pictorialBar",
      symbolSize: [40, 22],
      symbolOffset: [0, -8],
      symbolPosition: 'end',
      z: 12,
      itemStyle: {
        color: props.pictorialBarColor[0],
      },
      name,
      data: data.map((item) => {
        return {
          value: item,
          itemStyle: {
            opacity: item > 0 ? 1 : 0, //值为0时隐藏
          },
        };
      }),
    },
    //底部圆面
    {
      type: "pictorialBar",
      symbolSize: [40, 22],
      symbolOffset: [0, 8],
      z: 12,
      itemStyle: {
        color: props.pictorialBarColor[1],
      },
      name,
      data: data.map((item) => {
        return {
          value: item,
          itemStyle: {
            opacity: item > 0 ? 1 : 0,
          },
        };
      }),
    },
  ];

  return {
    grid: props.grid,
    tooltip: {},
    //   legend: {
    //     show: true,
    //     right: "5%",
    //     textStyle: {
    //       color: "#fff",
    //       fontSize: 14,
    //     },
    //    ...props.legend
    //   },
    //x轴
    xAxis: {
      type: "category",

      axisLine: {
        show: true,   // 是否显示轴线
        lineStyle: {
          color: '#ccc' // 轴线颜色
        }
      },
      // x轴文字
      axisLabel: {
        color: "#D8E6FF",
        fontSize: 20,
        margin: 15,
      },
      data: props.xAxis,
    },
    //y轴
    yAxis: {
      name: props.unit ? `单位：${props.unit}` : "", //单位文字
      nameTextStyle: {
        //单位样式
        color: "#BCD0F4",
        nameLocation: "start",
        fontSize: 20
      },
      nameGap: 40, //单位与y轴距离
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(0, 176, 255, 0.2)",
          type: "dashed",
        },
      },
      axisLabel: {
        color: '#FFFFFF',
        fontSize: 20
      },
      axisLine: {
        show: true,   // 是否显示轴线
        lineStyle: {
          color: '#ccc' // 轴线颜色
        }
      },
      ...props.yAxis,
    },
    series: seriesData,
  };
});
</script>
<style scoped>
.bar-wrap {
  width: 100%;
  height: 100%;
}
</style>